<template>
  <div class="search">
      <div class="search-contain">
        <span class="search-tip">消息</span>
        <input
          class="search-input"
          placeholder="搜索"
          v-model="searchText"
          />
      </div>
      <div class="message-tips">
        <span class="unread-msg">21条未读消息</span>
        <span class="unread-msg"><i class="iconfont iconqingkong"></i>清空未读消息</span>
      </div>
  </div>
</template>

<script>
  export default {
    name: 'Search',
    data () {
      return {
          searchText:''
      }
    }
  }
</script>

<style scoped lang="scss">
  .search{
    background-color: #f5f5f5;
    color: #333;
    .search-contain{
      display: flex;
      padding: 0.3rem;
      .search-tip{
        flex: 1;
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
        line-height: 0.8rem;
      }
      .search-input{
        flex: 5;
        padding: 0 1.5em;
        border: none;
        outline: none;
        background-color: #e0e0e0;
        border-radius: 2.5rem;
      }
      .search-input::-webkit-input-placeholder{
        color: #a0a0a0;
      }
    }
    .message-tips{
      padding: 0 0.3rem 0.3rem;
      font-size: 0.9em;
      .unread-msg{
        padding: 0 0.5em;
      }
    }
  }
</style>
